<!-- 登录 -->
<template>
  <div class="login-body">
    <el-form :model="LoginForm">
      <h2>后台管理系统</h2>
      <h1>登录</h1>
      <p>登录帐户以继续操作</p>
      <el-form-item>
        <label for="email" class="coodiv-text-11 font-weight-bold text-blackish-blue">用户名</label>
        <el-input type="input" placeholder="请输入用户名" v-model="LoginForm.username"></el-input>
      </el-form-item>
      <el-form-item>
        <label for="email" class="coodiv-text-11 font-weight-bold text-blackish-blue">密码</label>
        <el-link type="primary" style="margin-left: auto;">忘记密码</el-link>
        <el-input type="password" placeholder="请输入密码" v-model="LoginForm.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleLogin">登录</el-button>
      </el-form-item>
      </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import {api} from "@/utils/api"
import { useAllDataStore } from "@/stores";
import { useRouter } from "vue-router";
const store = useAllDataStore();
const router = useRouter();
const LoginForm = reactive({
  username : '',
  password : '',
})
const handleLogin = async () => {
  let reponse = await api.post('/api/login/getMenuList' , LoginForm)
  store.updateMenuList(reponse.data.menuList)
  store.state.token = reponse.data.token
  store.addMenuList(router , 'login');
  router.push('home')
}

</script>

<style scoped lang="less">
.login-body {
  width: 100%;
  height: 100%;
  // background-image: url("@/assets/img/background.jpg");
  // background-size: 100%;
  overflow: hidden;
}
.el-form {
  width: 400px;
  margin: 100px auto;
  border: 1px solid black;
  border-radius: 6px;
  padding: 50px 50px 20px 50px;
  background-color: fade(#FFFFFF, 70%);
  box-shadow: 0px 0px 25px aliceblue;
  h2{
    font-size : 20px;
    text-align: center;
    margin-bottom: 30px;
    font-weight: bold;
  }
  h1 {
    text-align: center;
    margin-bottom: 20px;
    font-size : 36px;
    font-weight: bold;
  }
  p {
    font-weight: lighter;
    text-align: center;
    margin-bottom: 50px;
  }
  .el-button {
    width: 300px;
    height: 50px;
    margin: auto;
    background-color: fade(#000000, 80%);
    color: aliceblue;
  }
}
</style>
